<!--
 * @Description: 设置规格选项内的规格值列表
 * @Date: 2023-04-08 15:16:59
 * @LastEditTime: 2023-04-10 19:03:19
 * @Author: Black
 * @FilePath: \store_admin\src\views\goods\components\SkuCardItem.vue
-->
<template>
  <div v-loading="loading">
    <el-tag v-for="(tag, index) in item.goodsSkusCardValue" :key="index" class="mx-1" :disable-transitions="false"
      effect="plain">
      <el-input v-model="tag.text" placeholder="选项值" class="ml-[-10px] w-24" size="small" @change="handleChange($event, tag)">
        <template #prefix>
          <el-icon class="pl-1">
            <PriceTag />
          </el-icon>
        </template>
        <template #suffix>
          <el-icon class="mx-[6px]" @click="handleClose(tag)">
            <Close />
          </el-icon>
        </template>
      </el-input>
    </el-tag>
    <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="mx-1 w-24" size="small"
      @keyup.enter="handleInputConfirm" @blur="handleInputConfirm">
      <template #prefix>
        <el-icon class="pl-1">
          <PriceTag />
        </el-icon>
      </template>
    </el-input>
    <el-button v-else class="ml-1" size="small" @click="showInput">
      + 添加值
    </el-button>
  </div>
</template>

<script setup>
import {
  initSkusCardItem,
} from '~/composables/useSku.js';

const props = defineProps({
  skuCardId: [Number, String]
})

const {
  item,
  inputValue,
  inputVisible,
  InputRef,
  handleClose,
  showInput,
  handleInputConfirm,
  loading,
  handleChange
} = initSkusCardItem(props.skuCardId)

</script>

<style>
.el-tag {
  @apply border-none;
}

.el-input__suffix-inner>:first-child {
  margin-left: 6px;
}

.el-input__prefix-inner>:last-child {
  margin-right: 6px;
}

.el-tag .el-tag__close {
  @apply ml-0;
}

.el-input--small .el-input__wrapper {
  padding: 0px;
}
</style>